<!-- 存放一些常用小组件，避免太多的tag文件 -->
<vresult>
    <span class="vresult-fail">{opts.riotValue}</span>
</vresult>

<radiogroup>
    <ul class={ radiogroup : true, radiogroup-multiline : opts.multiline==
    'true' }>
    <li each={ option, i in opts.options }>
        <label>
            <input class="ace" type="radio" name={parent.opts.name} value={option.value} checked={option.value ==
            parent.opts.riotValue}/>
            <span class="lbl"> {option.label} </span>
        </label>
    </li>
    </ul>

    <script>
        console.log("radiogroup", this.opts);
    </script>
</radiogroup>


<checkboxgroup>
    <ul class="{checkboxgroup : true, checkboxgroup-multiline : opts.multiline== 'true' }">
    <li each={ option, i in opts.options }>
        <label>
            <input name={parent.opts.name} class="ace" type="checkbox" value={option.value}
                   checked={parent.opts.riotValue.indexOf(option.value) !=-1}/>
            <span class="lbl"> {option.label}</span>
        </label>
    </li>
    </ul>

    <script>
        console.log("checkboxgroup", this.opts);
    </script>
</checkboxgroup>

<singlecheckbox>
    <label>
        <input name={opts.name} class="ace" type="checkbox" value="true" checked="{opts.riotValue + '' == 'true'}" onchange="{opts.onchange}"/>
        <span class="lbl"> {opts.label}</span>
    </label>
</singlecheckbox>

<singleselect>
    <select name={opts.name} value={opts.riotValue} class="form-control" onchange={opts.onchange}>
        <option each={option, i in opts.options} value={option.value} selected={option.value
        == parent.opts.riotValue}>{option.label}</option>
    </select>
    <script>
        console.log("singleselect", this.opts);
    </script>
</singleselect>

<multiselect>
    <select name={opts.name} multiple class="form-control">
        <option each={option, i in opts.options} value={option.value}
                selected={parent.opts.riotValue.indexOf(option.value) !=-1 }>{option.label}
        </option>
    </select>
    <script>
        console.log("gmselect", this.opts);
    </script>
</multiselect>

<raw>
    <span></span>
    <script>
        this.root.innerHTML = opts.content;

        this.on("update", function () {
            console.log("raw.update");
            this.root.innerHTML = opts.content;
        });
    </script>
</raw>

<paging>
    <div class="paging" show ={this.total > 0 } id={this.id}>共{this.total}条
        <button show={pageCount() > 1} disabled={ this.disablePrev }  class="op" onclick={this.onPrev}>上一页</button><span show={pageCount() > 1} class="current">{this.page}</span><button show={pageCount() > 1} disabled={ this.disableNext } class="op" onclick={this.onNext}>下一页</button>
    </div>
    <script>

        function guid() {
            function s4() {
                return Math.floor((1 + Math.random()) * 0x10000)
                    .toString(16)
                    .substring(1);
            }

            return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
                s4() + '-' + s4() + s4() + s4();
        }

        var thisPaging = this;

        this.pageCount = function(){
            return Math.ceil(this.total / this.pagesize);
        };

        this.onPrev = function () {
            this.page--;
            this.update();
            this.trigger("change");
        }

        this.onNext = function () {
            this.page++;
            this.update();
            this.trigger("change");
        }

        this.setTotal = function(total){
            this.total = total;

            var totalPage = Math.ceil(this.total / this.pagesize);
            this.disablePrev = this.page == 1;
            this.disableNext = this.page == totalPage;
        }

        this.getPage = function () {
            return this.page;
        }

        this.on('update', function () {
            console.log("update", this.opts);
            this.setTotal(this.opts.total);
        })

        this.id = guid();
        this.page = 1;
        this.pagesize = ss.PageSize;
        this.setTotal(this.opts.total);

    </script>
</paging>

